<template>
  <v-card>
    <v-container class="text-md-center">
      <v-text-field label="标题" v-model="form.title"></v-text-field>
      <mavon-editor v-model="form.content" style="min-height: 600px"/>
      <v-btn color="success" @click="handleSave">保存</v-btn>
    </v-container>

    <v-snackbar
      color="success"
      v-model="snackbar"
      :timeout="2000"
      top
    >
      {{ message }}
    </v-snackbar>
  </v-card>
</template>
<script type="text/ecmascript-6">
  import {save, detail} from '@/api/article'

  export default {
    data() {
      return {
        form: {
          title: '',
          content: ''
        },
        snackbar: false,
        message: '保存成功'
      }
    },
    watch: {
      '$route.params.id': function (newValue, oldValue) {
        console.log(newValue, oldValue);
        if (newValue) {
          this.getDetail(newValue)
        } else {
          this.form = {};
        }
      }
    },
    beforeMount() {
      console.log('this.$route.params.id', this.$route.params.id);
      if (this.$route.params.id) {
        this.getDetail(this.$route.params.id)
      }
    },
    methods: {
      async getDetail(id) {
        this.form = await detail(id);
      },
      handleSave() {
        console.log(this.form);

        save(this.form).then(data => {
          this.snackbar = true;
          this.$router.replace('/admin/article/' + data.id);
        })
      }
    }
  }
</script>
